#{extends 'main.html' /}
#{set title:'Home' /}

#{set 'moreStyles'}
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/index.css'}">
#{/set}


<!-- carousel for important news -->
<!-- 轮播图-->
<div class="container-fluid">
  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
      <div class="item active carousel-inner-row">
        <div class="col-md-4 col-md-push-1 carousel-inner-col">
          <img src="../public/images/dama.jpg" class="img-responsive">
        </div>
        <div class="col-md-7 col-md-push-1 carousel-text">
          <div class="carousel-caption carousel-inner-col">
            <h1>热烈欢迎广场舞大妈</h1>
            <p></p>
            <a class="btn btn-large btn-success" href="@{ShowNews.News}">查看更多</a>
          </div>
        </div>
      </div>
      <div class="item carousel-inner-row">
        <div class="col-md-4 col-md-push-1  carousel-inner-col">
          <img src="../public/images/training.jpg" class="img-responsive">
        </div>
        <div class="col-md-7 col-md-push-1 carousel-text">
          <div class="carousel-caption  carousel-inner-col">
            <h1>暑期第二课堂顺利结束</h1>
            <p>新广州人网站旨在为新广州人提供便利的帮助。据悉于7月5号开展的为期10天的暑期第二课堂顺利结束，学员们表示收获颇丰</p>
            <p><a class="btn btn-large btn-success" href="@{ShowCourses.showCommunityCourses}">查看更多</a></p>
          </div>
        </div>
      </div>
      <div class="item">
       <div class="col-md-4 col-md-push-1 carousel-inner-col">
        <img src="../public/images/rent.jpg" class="img-responsive">
      </div>
      <div class="col-md-7 carousel-text">
        <div class="carousel-caption  carousel-inner-col">
          <h1>华山区房屋出租</h1>
          <p>一房一厅一厕所一阳台，你值得拥有</p>
          <p><a class="btn btn-large btn-success" href="@{Houses.showHouses}">查看更多</a></p>
        </div>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
  </a>           
</div>
<!-- /.carousel -->
<!-- search frame float , visible only above 768-->
<div class="search hidden-xs">
  <form class="navbar-form " role="search" method="get" action="/ShowCourses/showCommunityCourses?categoryId=all">
    <div class="form-group">
      <input type="text" name="searchKey" class="form-control" />
    </div> 
    <button type="submit" class="btn btn-large btn-danger">搜索</button>
  </form>
</div>
<div class="clearfix"></div> 
</div>

<!-- main-container 8+4-->
<div class="main-container container-fluid">
  <div class="row">
   <div class="col-md-8" style="border-right:1px dashed #ddd">
     <!-- 社区课堂 -->
     <section  class="course">
       <h2 class="title">社区课堂</h2>
       <!-- Nav tabs -->
       <ul class="nav nav-tabs col-md-3" role="tablist">
         <li><a href="#early" role="tab" data-toggle="tab">已结束</a></li>
         <li class="active"><a href="#now" role="tab" data-toggle="tab">正在进行</a></li>
         <li><a href="#future" role="tab" data-toggle="tab">即将开始</a></li>
       </ul>

       <!-- Tab panes -->
       <div class="tab-content col-sm-8">
         <div class="tab-pane fade" id="early">
          <!-- 在640以下的 用js判断 并获得其中三个就够了 -->
          <div class="table-responsive">
           <table class="table table-hover table-condensed">
            <thread>
             <tr style="border:0;">
              <th>地点</th>
              <th>内容</th>
              <th>时间</th>
            </tr>
          </thread>
          <tbody>
          #{list items:courseGet?.getEndCourse(5),as:'course'}
	      <tr>
	        <td>${course.place }华农</td>
	        <td><a target="_blank" href="/showCourses/showCourseInfo?id=${course.id }">${course.title }</a></td>
	        <td>${course.showStartTime() }</td>
	      </tr>
	      #{/list}
          </tbody>
        </table>
        <a class="btn pull-right more" href="/ShowCourses/showCommunityCourses?categoryId=all">更多 >></a>
      </div>
    </div>
    <div class="tab-pane active fade in" id="now">
      <!-- 在640以下的 用js判断 并获得其中三个就够了 -->
      <div class="table-responsive">
       <table class="table table-hover table-condensed">
        <thread>
         <tr style="border:0;">
          <th>地点</th>
          <th>内容</th>
          <th>时间</th>
        </tr>
      </thread>
      <tbody>
      #{list items:courseGet?.getInCourse(5),as:'course'}
      <tr>
        <td>${course.place }华农</td>
        <td><a target="_blank" href="/showCourses/showCourseInfo?id=${course.id }">${course.title }</a></td>
        <td>${course.showStartTime() }</td>
      </tr>
      #{/list}
    </tbody>
  </table>
  <a class="btn pull-right more" href="/ShowCourses/showCommunityCourses?categoryId=all }">更多 >></a>
</div>
</div>
<div class="tab-pane fade" id="future">
  <div class="table-responsive">
   <table class="table table-hover table-condensed">
    <thread>
     <tr>
      <th>地点</th>
      <th>内容</th>
      <th>时间</th>
    </tr>
  </thread>
  <tbody>
             #{list items:courseGet?.getStartCourse(5),as:'course'}
	      <tr>
	        <td>${course.place }华农</td>
	        <td><a target="_blank" href="/showCourses/showCourseInfo?id=${course.id }">${course.title }</a></td>
	        <td>${course.showStartTime() }</td>
	      </tr>
	      #{/list}
</tbody>
</table>
<a class="btn pull-right more" href="/ShowCourses/showCommunityCourses?categoryId=all }">更多 >></a>
</div>
</div>
</div> 
</section>
<!-- 社区租房 --> 
<section class="rent section-line">
  <div class="show-house col-md-6 col-md-push-6">
  <h2 class="title">社区租房</h2>
  <!-- 为了提高页面的信息展示率，减少空白，此处分为两个列表，可用条件判断，举例 比如有10条信息，第一个列表展示1~6条，第二个列表展示7~10 ;次重要信息在移动端不展示 -->
     <table class="table table-hover table-condensed">
        <thread>
         <tr style="border:0;">
          <th class="col-md-4">内容</th>
          <th class="col-md-2">发布时间</th>
        </tr>
      </thread>
      <tbody>
     #{list items:houseList,as : 'house'}
       <tr>
       		<td><a href="@{Houses.showHouseInfo(house.id)}">${house.community},${house.bedRoom}室${house.livingRoom}厅${house.bathRoom}卫,(${house.price}元/月)</a></td>
       		<td><small>${house.showDate()}</small></td>
       </tr>
#{/list}
    </tbody>
    </table>
 </div>
   <div class="show-house col-md-6 col-md-pull-6">
    <img class="img-responsive"  src="../public/images/house2.jpg" alt="" style="margin-top:40px;">
  </div>
  <div class="clearfix"></div>
 <div class="pull-right">
     <a class="btn more" href="@{Houses.addHouse}">我要出租</a>	
     <span>|</span>
     <a class="btn more" href="@{Houses.showHouses}">更多 >></a>	
</div>
</section>   			
</div>
<!-- 社区新闻 -->
<div class="col-md-4">
  <section class="news">
   <h2 class="title  text-right">社区新闻</h2>
   <div class="thumbnail">
     <img src="../public/images/grace.jpg" alt="...">
     <div class="caption">
      <h4>社区头条</h4>
      <p ><a href="@{ShowNews.showNewsInfo(impNews.newsId)}">${impNews?.newsSummary}</a></p>
      <div class="clearfix"></div>
    </div>
  </div>

    <div class="table-responsive">
     <table class="table table-hover">
      <tbody>
      #{list items:newsList,as:'item'}
       <tr>
        <td><a href="@{ShowNews.showNewsInfo(item.newsId)}">【${item.newClassType}】${item.newsTitle}</a></td>
        <td class="hidden-xs">${item.newsCreateDate}</td>
      </tr>
      #{/list}
    </tbody>
  </table>
</div>
<a class="btn more pull-right" href="@{ShowNews.news}">更多 >></a>
</section>
</div>
<!-- 信息咨询 -->
<div class="col-md-12">
  <section class="consult">
    <form action="">
     <img src="../public/images/email.png" alt="" class="visible-lg-inline" >
     <span>有任何问题都可以咨询哦</span>
     <label class="sr-only" for="">咨询信息</label>
     <input type="text" >
     <button class="btn btn-warning">我要咨询</button>
   </form>
 </section>
</div>
<!-- 招工信息 -->
<div class="col-md-8" style="border-right:1px dashed #ddd">
  <section class="job section-line">
  <div class="col-md-6">

      <img class="img-responsive" src="../public/images/job2.jpg" alt="" style="margin-top:
      30px;">
  </div>	
 <div class="show-house col-md-6">
   <h2 class="title">招工信息</h2>
        <!-- 为了提高页面的信息展示率，减少空白，此处分为两个列表，可用条件判断，举例 比如有10条信息，第一个列表展示1~6条，第二个列表展示7~10 -->

  <ol class="hidden-xs">
       <table class="table table-hover table-condensed">
        <thread>
         <tr style="border:0;">
          <th class="col-md-4">内容</th>
          <th class="col-md-2">发布时间</th>
        </tr>
      </thread>
      <tbody>
#{list items : workList,as : 'work'}
       <tr>
       		<td><a href="@{Works.showWorkInfo(work.id)}">${work.title}</a></td>
       		<td><small>${work.showDate()}</small></td>
       </tr>
#{/list}
    </tbody>
    </table>
   </ol>
</div>
<div class="clearfix"></div>
 <div class="pull-right">
  <a class="btn more" href="@{Works.addWork}">我要招工</a>  
   <span>|</span>
   <a class="btn more" href="@{Works.showWorks}">更多 >></a>
 </div>
</section>
</div>
<!-- 维权资讯 -->
<div class="col-md-4">
  <section class="rights">
      <h2 class="title">维权资讯</h2>
      <ol>
        <li><a>广东矿工招聘(企业)</a></li>
        <li><a>蓝思科技(包住)高薪诚聘男女普工</a></li>
        <li><a>健兴梅家政长期诚聘保姆护工</a></li>
        <li><a>深圳机械加工厂的铣床操作技工</a></li>
        <li><a class="disabled">剧组拍戏需要招聘剧组服务人员</a><span style="color:red;">--已结束</span></li>
      </ol>
      <a class="btn more pull-right">我要维权 >></a>	
</section>
</div>
<!-- 友情链接 -->
<div>
</div>
</div>
</div>